<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>index</h1>
<a th:href="@{/user}">get all users</a><br>
<a th:href="@{/user/201}">get user</a><br>
<form th:action="@{/user}" method="post">
    username: <input type="text" name="username"/><br>
    password: <input type="text" name="password"/><br>
    <input type="submit" name="save user"/>
</form>

<form th:action="@{/user}" method="post">
<!--    设置隐藏域，name必须为_method -->
    <input type="hidden" name="_method" value="put">
    username:<input type="text" name="username"><br>
    password: <input type="text" name="password"><br>
    <input type="submit" name="update user">
</form>
<!--超链接来删除用户,onclick 触发删除函数-->
<a th:href="@{/user/102}" onclick="deleteUser(event)">delete user</a><br>
<!--删除表单-->
<form id="deleteForm" method="post">
    <input type="hidden" name="_method" value="delete">
</form>

<script>
<!--    定义一个js函数-->
    function deleteUser(event) {
        // 获取表单
        let deleteForm = document.getElementById("deleteForm");
        // 给表单指定超链接的action值，使表单跳转到指定路径
        // 获取事件对象的目标对象，就是哪个标签，再获取href属性
        deleteForm.action = event.target.href;
        // 提交表单
        deleteForm.submit();
        // 阻止超链接的默认行为
        event.preventDefault();
    }
</script>
</body>
</html>